<script setup lang='ts'>
import { computed, onMounted, ref } from 'vue'
import { userLikeData } from "../../../api/api";
import { useRouter } from "vue-router";
const router = useRouter()
const count = ref(10)
const loading = ref(false)
const isLogin = ref(false)
const num = ref(0)
const data = ref()
const noMore = computed(() => count.value >= num.value)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
    loading.value = true
    setTimeout(() => {
        count.value += 10
        loading.value = false
    }, 2000)
}
//用户喜爱数据
const userL = async () => {
    const res = await userLikeData({mail:localStorage.getItem('mail') as string})
    if(res.data.data.length === 0) return isLogin.value = true
    num.value = res.data.data.length
    data.value = res.data.data
}
onMounted(() => {
    userL()
})
</script>

<template>
    <div class="content">
        <div class="item">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>我的喜爱</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-empty style="height: 100%;" description="暂无数据" v-if="isLogin" />
        <div class="infinite-list-wrapper" style="overflow: auto" v-if="!isLogin">
            <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
                <li v-for="i in data" :key="i._id" class="list-item" @click="router.push({name:'detailsPage',query:{type:i._id}})">
                    <div class="title">
                        <h3>{{i.name}}</h3>
                        <div class="data">
                            <span class="mydata">素材分类：<p class="p">{{i.selectData}}</p></span>
                            <span class="mydata">素材大小：<p class="p">{{i.size}}</p></span>
                            <span class="mydata">素材格式：<p class="p">fla</p></span>
                        </div>
                    </div>
                    <div class="money">
                        <el-tag type="success">{{i.types}}积分</el-tag>
                    </div>
                </li>
            </ul>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore">数据加载完毕</p>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.infinite-list-wrapper {
    height: 700px;
    margin-top: 20px;
}

.infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list-wrapper .list-item {
    box-sizing: border-box;
    padding: 10px;
    width: 98%;
    min-height: 100px;
    margin: auto;
    background-color: #f5f7fa;
    border-radius: 10px;
    color: black;
    display: grid;
    grid-template-columns: 90% 10%;
    transition: box-shadow 0.8s ease;
    margin-top: 8px;
}

.list-item:hover {
    box-shadow: 0 0 5px 5px #ccc;
    cursor: pointer;
}

.infinite-list-wrapper .list-item+.list-item {
    margin-top: 10px;
}

p {
    color: #999;
    margin-top: 10px;
    text-align: center;
}

.mydata {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.mydata:nth-child(2),
.mydata:nth-child(3) {
    margin-left: 20px;
}

.title {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
}

.p {
    margin-top: 0;
}

.data {
    display: flex;
}

.money {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>